import React from 'react';
import { Routes, Route, Navigate } from 'react-router-dom';
import { Layout } from 'antd';

import { useAuth } from './contexts/AuthContext';
import Navbar from './components/Navbar';
import ConnectWallet from './pages/ConnectWallet';
import Login from './pages/Login';
import Register from './pages/Register';
import Dashboard from './pages/Dashboard';
import Staking from './pages/Staking';
import Transactions from './pages/Transactions';
import Referrals from './pages/Referrals';
import Profile from './pages/Profile';

const { Content } = Layout;

function App() {
  const { isAuthenticated, isLoading } = useAuth();

  if (isLoading) {
    return (
      <Layout className="min-h-screen flex items-center justify-center">
        <div className="text-center">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
          <p className="text-gray-600">Loading...</p>
        </div>
      </Layout>
    );
  }

  return (
    <Layout className="min-h-screen bg-gray-50">
      {isAuthenticated && <Navbar />}

      <Content className={isAuthenticated ? "pt-16" : ""}>
        <Routes>
          <Route
            path="/"
            element={
              isAuthenticated ? <Navigate to="/dashboard" replace /> : <ConnectWallet />
            }
          />
          <Route
            path="/connect"
            element={<ConnectWallet />}
          />
          <Route
            path="/login"
            element={
              isAuthenticated ? <Navigate to="/dashboard" replace /> : <Login />
            }
          />
          <Route
            path="/register"
            element={
              isAuthenticated ? <Navigate to="/dashboard" replace /> : <Register />
            }
          />
          <Route
            path="/dashboard"
            element={
              isAuthenticated ? <Dashboard /> : <Navigate to="/connect" replace />
            }
          />
          <Route
            path="/staking"
            element={
              isAuthenticated ? <Staking /> : <Navigate to="/connect" replace />
            }
          />
          <Route
            path="/transactions"
            element={
              isAuthenticated ? <Transactions /> : <Navigate to="/connect" replace />
            }
          />
          <Route
            path="/referrals"
            element={
              isAuthenticated ? <Referrals /> : <Navigate to="/connect" replace />
            }
          />
          <Route
            path="/profile"
            element={
              isAuthenticated ? <Profile /> : <Navigate to="/connect" replace />
            }
          />
          <Route path="*" element={<Navigate to="/" replace />} />
        </Routes>
      </Content>
    </Layout>
  );
}

export default App;